<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">btn1</button>
    <button class="btn2">btn double</button>
    <button class="btn3">onmousedown</button>
    <button class="btn4">onmouseup</button>
    <button class="btn5">onmousemove</button>

    <input class="inp1" type="text">
    <input class="inp2" type="text">



    <script>
        // 单击事件
        document.querySelector('.btn1').onclick = function (event) {
            // 事件对象
            console.log(event)
            console.log(event.target)
            console.log(this)
            console.log(this === event.target)

            // 获取焦点
            document.querySelector('.inp1').focus()
        }

        // 双击事件
        document.querySelector('.btn2').ondblclick = function (event) {
            // 事件对象
            console.log(event)
            console.log(event.target)
            console.log(this)
            console.log(this === event.target)

            // 失去焦点
            document.querySelector('.inp1').blur()
        }

        // 鼠标按下时触发事件
        document.querySelector('.btn3').onmousedown = function (event) {
            // 事件对象
            console.log(event)
            console.log(event.target)
            console.log(this)
            console.log(this === event.target)
        }

        // 鼠标抬起时触发事件
        document.querySelector('.btn4').onmouseup = function (event) {
            // 事件对象
            console.log(event)
            console.log(event.target)
            console.log(this)
            console.log(this === event.target)
        }

        // 鼠标在目标元素中移动时
        document.querySelector('.btn5').onmousemove = function (event) {
            // 事件对象
            console.log(event)
            console.log(event.target)
            console.log(this)
            console.log(this === event.target)
        }

        // 键盘按键按下的时候触发
        document.querySelector('.inp1').onkeydown = function (event) {
            if (event.keyCode === 13) {
                // console.log('回车键被按下了')
                // // 事件对象
                // console.log(event)
                // console.log(event.target)
                // console.log(this)
                // console.log(this === event.target)
    
                // // 按键的唯一标识
                // console.log(event.keyCode)
                // console.log(event.target.value)
                // console.log(this.value)

                // this.value = '测试回车按键'

                this.setAttribute('value', '666')
                console.log(this.getAttribute('value'))
            }
        }

        // 键盘按键抬起的时候触发
        document.querySelector('.inp2').onkeyup = function (event) {
            console.log('键盘抬起了')
        }

    </script>
</body>
</html>